<template>
    <cc-dialog ref="packetDialog" show-close :title="title" :width="width" height="90%">
		<div style="padding:10px;">
			<!-- {{packetData}} -->
			<el-input type="textarea" v-model="packetData" :autosize="{maxRows: 25}"></el-input>
		</div>
		<template v-slot:footer-left>
			<div>
				<el-button size="mini" type="success" @click="onFormat">格式化</el-button>
                <!-- <el-button size="mini" type="success" @click="onDecode">解码</el-button> -->
                <el-button size="mini" type="warning" @click="onNotFormat">还原</el-button>
			</div>
		</template>
	</cc-dialog>
</template>

<script>
module.exports = {
    data: function() {
        return {
            packetData: '',
            currentRow: {}
        }
    },
    props: {
        width: {
            default: '800px',
            type: String
        },
        title: {
            default: '报文查看',
            type: String
        },
        requestTitle: {
            default: '请求报文',
            type: String
        },
        responseTitle: {
            default: '响应报文',
            type: String
        },
        requestField: String,
        responseField: String,
        customData: Array
    },
    methods: {
        open: function(item) {
            console.log(this.requestField);

            if(item == null) {
                UI.warning("请传入一条记录");
            }
            this.currentRow = item;
            // var customData = this.buildCustomData();
            // var packetData = this.buildPacketData(false);
            this.buildAllData(false);
            this.$refs.packetDialog.open();
        },
        buildData: function(str, isFormat, isDecode) {
            if(str == null) {
                return null;
            }
            if(isFormat) {
                str = MyUtil.formatXmlOrJson(str);
            }
            if(isDecode) {
                str = decodeURIComponent(str);
            }
            return str;
        },
        buildAllData: function(isFormat, isDecode) {
            var cdata = this.buildCustomData(isFormat, isDecode);
            var pdata = this.buildPacketData(isFormat, isDecode);
            this.packetData = cdata + pdata;
        },
        buildCustomData: function(isFormat, isDecode) {
            var row = this.currentRow ;
            var result = '';
            for(var i = 0; i < this.customData.length; i++) {
                var data = this.customData[i];
                var field = data.field;
                var name = data.name;
                var output = this.buildData(row[field], isFormat, isDecode);
                result += (name + '\n' + output + '\n\n');
            }
            return result + '\n';
        },
        buildPacketData: function(isFormat, isDecode) {
            isFormat = isFormat || false;
            isDecode = isDecode || false;
            var row = this.currentRow ;

            var request;
            var response;
            if(this.requestField != null) {
                request = this.buildData(row[this.requestField], isFormat, isDecode);
                response = this.buildData(row[this.responseField], isFormat, isDecode);
            } else {
                request = this.buildData(row.requestPacket, isFormat, isDecode);
                response = this.buildData(row.responsePacket, isFormat, isDecode);
            }
            
            // 格式化校验
            if(isFormat) {
                if(request == null && response == null) {
                    UI.warning("格式化失败，报文不是常规的json或xml");
                    return this.packetData; 
                }
            }

            var packet = this.requestTitle + "：\n" +  request + '\n'
                ;

            if(this.responseTitle != '') {
                packet = packet + "\n" + this.responseTitle + "：\n" + response + '\n';
            }

            return packet;
        },
        onDecode: function() {
            this.packetData = this.buildPacketData(false, true);
        },
        onFormat: function() {
            // var row = this.currentRow ;
            this.buildAllData(true);
        },
        onNotFormat: function() {
            this.buildAllData(false);
        }
    },
}
</script>